<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="../../dist/mermaid.css"/>
    <script src="../../dist/mermaid.js"></script>
    <style>
        body{
            background-color: #89896f;
        }

    </style>
    <script>

        function callback(id){
            alert(id);
        }
        function callback2(id){
            alert('x'+id);
        }

        function onNodeClick(nodeId){
            alert(nodeId);
        }

        mermaid.initialize({logLevel:1});
    </script>
</head>
    <body>
    <h1>Links to callbacks</h1>
    A has a tooltip and a callback <br/>
    B has a link and a tooltip <br/>
    C has a long tooltip <br/>
    <div class="mermaid" id="i211">
    graph LR;
        A-->B;
        B-->C;
        click A callback "Tooltip"
        click B "http://www.github.com" "This is a link"
        click C callback "Tooltip quite long tooltip. So long that several rows are required... Not just two rows..."
    </div>

    <h1>Links to urls</h1>
    A second diagram that should have its own callback on A even though the node has the same id.
    <div class="mermaid" id="i213">
        graph LR;
            A-->B
            B-->C
            click A callback2 "Tooltip3"
    </div>

    <h1>Issue #272</h1>

    <div class="mermaid" id="i213">
        graph LR;

        A((start))-->B(step1);
        B-->C[step2];
        C-->D{step3};
        D-->E[end];

        classDef green fill:#9f6,stroke:#333,stroke-width:1px;
        class A,B,C,D,E green;

        click B onNodeClick "tooltip"
    </div>
    </body>
</html>
